<template>
  <div class="hot-singers">
    <div class="section-header">
      <h2 class="section-title">热门歌手</h2>
      <div class="view-more">更多</div>
    </div>
    
    <div class="singer-scroll">
      <div 
        v-for="singer in singers" 
        :key="singer.singer_mid" 
        class="singer-card"
        @click="goToSingerDetail(singer)"
      >
        <div class="singer-avatar">
          <img :src="singer.singer_pic" :alt="singer.singer_name">
        </div>
        <div class="singer-name">{{ singer.singer_name }}</div>
      </div>
    </div>
    
    <div v-if="loading" class="loading">
      <div class="loading-spinner"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const singers = ref([]);
const loading = ref(true);

// 获取歌手列表
const fetchSingers = async () => {
  try {
    loading.value = true;
    // 使用代理路径
    const response = await axios.get('/api/singer/list');
    
    if (response.data && response.data.result === 100 && response.data.data.list) {
      // 只显示前8个歌手
      singers.value = response.data.data.list.slice(0, 8);
    } else {
      console.error('获取歌手列表失败:', response.data);
    }
  } catch (error) {
    console.error('获取歌手列表错误:', error);
  } finally {
    loading.value = false;
  }
};

// 跳转到歌手详情页
const goToSingerDetail = (singer) => {
  router.push({
    path: '/singer-detail',
    query: { id: singer.singer_mid }
  });
};

onMounted(() => {
  fetchSingers();
});
</script>

<style lang="scss" scoped>
.hot-singers {
  margin: 20px 0;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
    
    .view-more {
      font-size: 14px;
      color: #888;
      cursor: pointer;
      
      &:hover {
        color: #31c27c;
      }
    }
  }
  
  .singer-scroll {
    display: flex;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: none; /* Firefox */
    
    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Edge */
    }
    
    .singer-card {
      flex: 0 0 auto;
      width: 90px;
      margin-right: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      
      &:hover {
        .singer-avatar img {
          transform: scale(1.05);
        }
      }
      
      .singer-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
      }
      
      .singer-name {
        font-size: 14px;
        margin-top: 8px;
        text-align: center;
        color: #333;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  
  .loading {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    
    .loading-spinner {
      width: 24px;
      height: 24px;
      border: 2px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top-color: #31c27c;
      animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  }
}
</style>